<template>
  <div v-move class="box">
    <div class="header"></div>
    <div>
      <div
          v-show="pans.length"
          class="tabs"
      >
        <div class="tab-title">
          <div
              v-for="(item) in pans"
              :key="item.id"
              class="item"
              :class="{ 'active': currentActive === item.index }"
              @click="changeTab(item.index)"
          >{{ item.label }}</div>
        </div>
        <div class="tab-content">
          <div v-if="currentActive ==1">安全</div>
          <div v-if="currentActive ==2">进度</div>
          <div v-if="currentActive ==3">投资</div>

        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { Directive,ref } from "vue";
const vMove: Directive = {
  mounted(el: HTMLElement) {
    let moveEl = el.firstElementChild as HTMLElement;
    const mouseDown = (e: MouseEvent) => {
      //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
      console.log(e.clientX, e.clientY, "-----起始", el.offsetLeft);
      let X = e.clientX - el.offsetLeft;
      let Y = e.clientY - el.offsetTop;
      const move = (e: MouseEvent) => {
        el.style.left = e.clientX - X + "px";
        el.style.top = e.clientY - Y + "px";
        console.log(e.clientX, e.clientY, "---改变");
      };
      document.addEventListener("mousemove", move);
      document.addEventListener("mouseup", () => {
        document.removeEventListener("mousemove", move);
      });
    };
    moveEl.addEventListener("mousedown", mouseDown);
  },
};
let currentActive = ref(1);
let pans=[
  { id: Date.parse(new Date()) + Math.random(), index: 1, label: '安全' },
  { id: Date.parse(new Date()) + Math.random(), index: 2, label: '进度' },
  { id: Date.parse(new Date()) + Math.random(), index: 3, label: '投资' }
]

const changeTab =(itemindex) => {
  currentActive.value=itemindex
}
</script>

<style lang='scss'>

::root {
  --color: "#409EFF";
}
.tabs {
  .tab-title {
    display: flex;
    // align-items: flex-start;
    align-items: stretch;	// 侧边栏时，使侧栏高度与内容高度一致，按最高的显示
    margin-bottom: 14px;
    border-bottom: 1px solid #ccc;
    .item {
      padding: 10px;
      /* padding-bottom: 20px; */
      cursor: pointer;
      white-space: nowrap;
    }
    .active {
      // color: var(--color);
      color: #409EFF;
      /* padding-bottom: 15px; // 修正边框值：20px - 5px = 15px */
      border-bottom: 5px solid #409EFF;
      background-image: linear-gradient(
          to top,
          rgba($color: #409EFF, $alpha: 0.2),
          transparent
      );
    }
  }
}
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  .header {
    height: 20px;
    background: black;
    cursor: move;
  }
}
</style>